<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/* 尺寸问题 屏幕宽高比不一致  限定一个宽高范围
			 min-width属性 ：最小宽度              min-height属性：最大高度
			 max-width属性： 最大宽度              max-height属性：最大高度
			 
			 */
			div{
				width:80%;/* 默认宽度 */
				min-width: 500px;/* 内容最小宽度是500px 不能改变 */
				max-width: 600px; /* 页面尺寸:最小是500px,最大是800px 默认80% */
				/* 定好最小最大宽高   PC  80%   300px
				                  移动   500~600宽度【页面不变】  300px
								  自适应
				 */
				height: 300px;
				background: #ffaaff;
			}
			/*
			 html结构    外层div--container   内层div--.box    写lorem
			 css结构       .container 样式  背景颜色#f0f0f0
			                                padding：20px；
											文本居中
							.box样式：背景颜色#4caf50
							文字改颜色   白色
							宽度60%
							500~600宽度【页面不变】
							margin：auto；
											
			 */
			 
			
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem amet, veniam, modi accusamus laboriosam provident totam autem nam est esse, sed quod incidunt natus maiores distinctio mollitia saepe dicta iure?</div>
	
	</body>
</html>